<template>
  <div class="">
    <nil-page icon="search" title="数据查询" margin-bottom>
      <nil-search :form="role_form" @search="search"></nil-search>
    </nil-page>

    <nil-page icon="paperclip" title="数据列表">
      <template #option>
        <el-button type="primary" @click="handleAdd()"> 添加角色 </el-button>
      </template>
      <nil-thin-table
        :data="tableData"
        :columns="role_columns"
        :loading="tableDataLoading"
      >
        <template #option="{ row }">
          <el-button type="primary" @click="handleEdit(row)"> 修改 </el-button>
          <el-button type="danger" @click="handleDelete(row)"> 删除 </el-button>
        </template>
      </nil-thin-table>
    </nil-page>
    <el-drawer
      v-model="addAndChangeBox"
      :title="`${isChange ? '修改' : '创建'}角色`"
      direction="rtl"
      destroy-on-close
      size="40%"
    >
      <ac-box
        :data="oneData"
        :loading="oneDataLoading"
        :isChange="isChange"
        @change="change"
        @save="save"
        @cancel="addAndChangeBox = false"
      />
    </el-drawer>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { role_columns } from "@/config/table.sys";
import { role_form } from "@/config/search.form";
import api from "@/http/api";
import {
  ADMIN_ROLE_CHANGE,
  ADMIN_ROLE_DELETE,
  ADMIN_ROLE_LIST,
} from "@/http/uri";
import { ElMessage, ElMessageBox } from "element-plus";
import AcBox from "./AcBox.vue";
// 表 是否 加载中
const tableDataLoading = ref(false);
// 表数据
const tableData = ref([]);

let _tabelData = [];

// 加载数据
const initData = () => {
  tableDataLoading.value = true;
  api
    .GET(ADMIN_ROLE_LIST)
    .then((res) => {
      if (res.success) {
        tableData.value = res.data;
        _tabelData = res.data;
      }
    })
    .finally(() => {
      tableDataLoading.value = false;
    });
};

// vue 生命周期 hook
onMounted(() => {
  initData();
});

// 搜索
const search = ({ key }) => {
  console.log(key);
  // 创建正则表达式
  const str = ["", ...key, ""].join(".*"); //转化成正则格式的字符串
  const reg = new RegExp(str);
  tableData.value = _tabelData.filter((it) => reg.test(it.roleName));
};

const isChange = ref(false);
const oneDataLoading = ref(false);
const addAndChangeBox = ref(false);
const oneData = reactive({
  id: "",
  roleName: "",
  roleKey: "",
});

// 添加
const handleAdd = () => {
  isChange.value = false;
  addAndChangeBox.value = true;

  oneData.id = "";
  oneData.roleName = "";
  oneData.roleKey = "";
};
// 修改
const handleEdit = (row) => {
  isChange.value = true;
  addAndChangeBox.value = true;

  oneData.id = row.id ?? "";
  oneData.roleName = row.roleName ?? "";
  oneData.roleKey = row.roleKey ?? "";
};
// 删除
const handleDelete = (row) => {
  console.log(row);
  ElMessageBox.confirm("是否要进行 删除 操作, 是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      api.DELETE(ADMIN_ROLE_DELETE(row.id)).then((res) => {
        if (res.success) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          initData();
        } else {
          ElMessage({
            type: "error",
            message: res.message,
          });
        }
      });
    })
    .catch(() => {});
};

function save(data, menus) {
  oneDataLoading.value = true;
  let upData = {
    roleName: data.roleName ?? "",
    roleKey: data.roleKey ?? "",
    menus: menus,
  };
  api
    .POST(ADMIN_ROLE_CHANGE, upData)
    .then((res) => {
      if (res.success) {
        ElMessage.success(res.message);
        addAndChangeBox.value = false;
        // _oneDataBackJSON = "";
        initData();
      } else {
        ElMessage.error(res.message);
      }
      oneDataLoading.value = false;
    })
    .catch(() => {
      oneDataLoading.value = false;
    });
}

const change = (data, menus) => {
  oneDataLoading.value = true;
  let upData = {
    roleId: data.id ?? "",
    roleName: data.roleName ?? "",
    roleKey: data.roleKey ?? "",
    menus: menus,
  };
  // if (_oneDataBackJSON == "") {
  //   ElMessage.error("修改失败.");
  //   return;
  // }
  // if (_oneDataBackJSON == JSON.stringify(data)) {
  //   ElMessage.error("没有修改内容.");
  //   return;
  // }
  oneDataLoading.value = true;
  api
    .PUT(ADMIN_ROLE_CHANGE, upData)
    .then((res) => {
      if (res.success) {
        ElMessage.success(res.message);
        addAndChangeBox.value = false;
        // _oneDataBackJSON = "";
        initData();
      } else {
        ElMessage.error(res.message);
      }
      oneDataLoading.value = false;
    })
    .catch(() => {
      oneDataLoading.value = false;
    });
};
</script>
